<template>
  <!-- 
  filters: 筛选
  sortable： 是否排序
  show-overflow-tooltip：超出长度显示。。。
 -->

  <el-table-column
    v-if="!item.children"
    :label="item.label"
    :prop="item.prop"
    :width="item.width"
    :align="item.align"
    :fixed="item.fixed"
    :filters="item.filters"
    :filter-method="item.filters ? filterHandler : null"
    :sortable="item.sortable"
    :show-overflow-tooltip="item.showOverflow ? item.showOverflow : false"
  >
    <template #default="{ row }">
      <template v-if="item.label === '操作' && item.type !== 'custom'">
        <el-button
          v-for="ite in operateArr"
          :key="ite.name"
          size="mini"
          type="text"
          @click="onOperate(ite.name, row)"
          class="ordinary-btn"
          ><svg-icon
            :icon-class="ite.icon"
            style="width: 16px; height: 16px"
            v-if="ite.icon"
          />
          {{ ite.name }}</el-button
        >
      </template>
      <slot
        v-else-if="item.slots"
        :name="item.slots ? item.slots.default : ''"
        v-bind:row="row"
      ></slot>
      <span v-else-if="item.type && item.type === 'date'">{{
        parseTime(row[item.field])
      }}</span>
      <span v-else-if="item.type && item.type === 'input'">
        <el-input
          v-model="row[item.field]"
          style="maxwidth: 300px"
          size="small"
          placeholder="请输入内容"
          :disabled="item.disabled"
        ></el-input>
      </span>
      <span v-else-if="item.index">
        <el-input
          v-model="row[item.field]"
          style="maxwidth: 300px"
          size="small"
          placeholder="请输入内容"
          :disabled="item.disabled"
        ></el-input>
      </span>
      <span v-else-if="item.type && item.type === 'select'">
        <el-select
          v-model="row[item.field]"
          placeholder="请选择"
          style="width: 100%; maxwidth: 300px"
          :disabled="item.disabled"
        >
          <el-option
            v-for="data in del(item.options)"
            :key="data.value"
            :label="data.label"
            :value="data.value"
          >
          </el-option>
        </el-select>
      </span>
      <span v-else-if="item.type === 'sys_system_name'">
        <dict-tag
            :options="dict.type.sys_system_name"
            :value="row[item.field]"
          />
      </span>
      <span v-else-if="item.type === 'sys_sub_system_name'">
        <dict-tag
            :options="dict.type.sys_sub_system_name"
            :value="row[item.field]"
          />
      </span>
      <span v-else-if="item.type === 'sub_system_configuration_code'">
        <dict-tag
            :options="dict.type.sub_system_configuration_code"
            :value="row[item.field]"
          />
      </span>
      <span v-else-if="item.type === 'sys_manufacturer'">
        <dict-tag
            :options="dict.type.sys_manufacturer"
            :value="row[item.field]"
          />
      </span>
      <span v-else-if="item.type === 'sys_specification_model'">
        <dict-tag
            :options="dict.type.sys_specification_model"
            :value="row[item.field]"
          />
      </span>
      <span v-else-if="item.type && item.type === 'inputNumber'">
        <el-input-number
          v-model="row[item.field]"
          :min="0"
          label="數量"
        ></el-input-number>
      </span>
      <span v-else>{{ row[item.field] }}</span>
    </template>
  </el-table-column>
  <el-table-column v-else :label="item.label">
    <table-column
      v-for="ite in item.children"
      :item="ite"
      :key="ite.field"
      :operateArr="operateArr"
      :slotArr="slotArr"
      @on-operate="onOperate"
    >
      <template v-for="slot in slotArr" #[slot.default]="row">
        <slot :name="slot.default" v-bind="row"></slot>
      </template>
    </table-column>
  </el-table-column>
</template>
<script>
export default {
  name: "TableColumn",
  dicts: [
    "sys_system_name",
    "sys_sub_system_name",
    "sub_system_configuration_code",
    "sys_group_method",
    "sys_configuration_type",
    "sys_manufacturer",
    "sys_specification_model",
  ],
  props: {
    item: {
      type: Object,
      default: null,
    },
    operateArr: {
      type: Array,
      default: null,
    },
    slotArr: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    onOperate(name, row) {
      this.$emit("on-operate", name, row);
    },
    filterHandler(value, row, column) {
      return row[column.property] === value;
    },
    del(data) {
      return eval(data);
    },
  },
};
</script>
<style scoped lang="scss">
.operateIcon {
  height: 15px;
  width: 15px;
  margin-right: 5px;
}
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #fafafa;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-color: #e9e9e9;
}
::v-deep .el-table td.el-table__cell {
  border-color: #e9e9e9;
}
::v-deep .el-table th.el-table__cell > .cell {
  font-size: 16px;
  color: #333333a6;
  font-weight: 500;
}
.cell {
  span {
    font-size: 16px;
    font-weight: 400;
    color: #333333a6;
  }
  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    span {
      color: #333333e6;
    }
  }
}
::v-deep .el-pagination__total {
  font-size: 14px;
  color: #00000099;
}
::v-deep .el-pagination {
  .el-select .el-input {
    .el-input__inner {
      width: 90px;
      height: 32px;
      border-color: #dcdcdc;
      color: #000000e6;
      font-size: 14px;
      &:hover {
        border-color: #dcdcdc;
      }
    }
    .el-input__suffix {
      right: 12px;
      .el-select__caret {
        color: #000000e6;
        font-weight: 600;
      }
    }
  }
  .btn-prev,
  .btn-next {
    background-color: #fff;
  }
  .btn-next {
    color: #000000e6;
  }
  .el-pager {
    li {
      width: 32px;
      height: 32px;
      border-radius: 3px;
      background-color: #fff;
      border: 1px solid #dcdcdc;
      line-height: 32px;
      color: #00000099;
      &:not(.disabled):hover {
        color: #00000099;
      }
      &:not(.disabled).active {
        background-color: #971111;
        border-color: #971111;
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .el-pagination__jump {
    color: #000000e6;
    font-size: 14px;
    .el-input__inner {
      width: 48px;
      height: 32px;
      font-size: 14px;
      color: #000000e6;
      border-color: #dcdcdc;
    }
  }
}
::v-deep .el-checkbox__inner {
  &:hover {
    border-color: #971111;
  }
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #971111;
  background-color: #971111;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #971111;
}
.table_index {
  display: inline-block;
  width: 130px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  padding-left: 8px;
  cursor: no-drop;
  border: 1px solid #dcdcdc;
  background: rgba(241, 241, 241, 0.9);
}
.el-input-number--medium {
  width: 100%;
}
</style>
